import { resourceLibraryApi } from '@/api';
import { useSafeState } from 'ahooks';
import { Descriptions } from 'antd';
import { useEffect } from 'react';
import { ICourseWareDetail } from '../common/interface';

function GraphicCourseWareDetail(props: { coursewareId: string; noStyle?: boolean }) {
  const { coursewareId, noStyle } = props;
  const [videCourseWareDetail, setVideCourseWareDetail] = useSafeState<ICourseWareDetail>();
  // <Drawer destroyOnClose={true} />
  useEffect(() => {
    resourceLibraryApi.getCourseWareById({ coursewareId }).then((res) => {
      const data = res.data as ICourseWareDetail;
      setVideCourseWareDetail(data);
    });
  }, [coursewareId, setVideCourseWareDetail]);

  return (
    <div className="courseware_drawer_content">
      {videCourseWareDetail && (
        <>
          <Descriptions column={2} className={noStyle ? undefined : 'ym_descriptions'}>
            <Descriptions.Item label="课件名称" span={1}>
              {videCourseWareDetail.name}
            </Descriptions.Item>
            <Descriptions.Item label="创建时间" span={1}>
              {videCourseWareDetail.newCreateTime}
            </Descriptions.Item>
            <Descriptions.Item label="课件id" span={2}>
              {videCourseWareDetail.coursewareId}
            </Descriptions.Item>
          </Descriptions>
          <Descriptions column={2} className={noStyle ? undefined : 'ym_descriptions'}>
            <Descriptions.Item label="" span={2} contentStyle={{ width: '100%', overflow: 'auto' }}>
              <div dangerouslySetInnerHTML={{ __html: videCourseWareDetail.pictextContent ?? '' }}></div>
            </Descriptions.Item>
          </Descriptions>
        </>
      )}
    </div>
  );
}

export default GraphicCourseWareDetail;
